<template>
  <nav>
    <ul>
      <router-link
        v-for="data in datalist"
        :key="data.test"
        :to="data.path"
        tag="li"
        activeClass="gaoliang"
        class="iconfont itling"
        :class="data.aclass"
      >{{data.test}}</router-link>
    </ul>
  </nav>
</template>
<script>
export default {
  data() {
    return {
      datalist: [
        {
          test: "首页",
          path: "/homepage",
          aclass: "icon-all"
        },
        {
          test: "好物",
          path: "/list3",
          aclass: "icon-office"
        },
        {
          test: "收藏",
          path: "/collect",
          aclass: "icon-account"
        }
      ]
    };
  }
};
</script>
<style lang="scss">
.itling {
  color: red($color: #000000);
  display: flex;
  flex-direction: column;
  line-height: 25px;

  font-size: 16px;
  font-weight: bold;
}
.gaoliang {
  color: rgb(253, 222, 74);
}
nav {
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 50px;
  background: white;
  z-index: 999;
  border-top: 1px solid #e0e0e0;
  ul {
    display: flex;
    li {
      flex: 1;
      line-height: 50px;
      text-align: center;
      font-size: 14px;
    }
  }
}
</style>
